<!-- 特征管理 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">{{ item }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="table-wrap-box">
      <el-container style="height: 100%">
        <el-aside style="height: 50vh;border-right: 1px solid #e6e6e6;" width="220px">
          <div class="tree-top-tool-btns">
            <el-button icon="el-icon-plus" plain size="mini" @click="addBtnClick"></el-button>
            <el-button icon="el-icon-delete" plain size="mini"></el-button>
            <el-button icon="el-icon-edit" plain size="mini"></el-button>
            <el-button icon="el-icon-setting" plain size="mini"></el-button>
          </div>
          <div class="tree-box">
            <el-tree
                :data="categoriesTree"
                show-checkbox>
            </el-tree>
          </div>
        </el-aside>
        <el-main>
          <el-table>

          </el-table>
        </el-main>
      </el-container>
    </el-card>

    <BaseDialog ref="baseDlg" @ok-click="handleOkClick">
      <template #content>
        <CategoryForm ref="cateForm" />
      </template>
    </BaseDialog>

  </div>
</template>

<script>

import BaseDialog from "@/components/dialog/BaseDialog";
import CategoryForm from "@/components/feature/CategoryForm";
import {$FeatureApi} from "@/network/feature/FeatureApi";

export default {
  name: "FeatureManage",
  components: {
    CategoryForm,
    BaseDialog
  },
  data() {
    return {
      breadcrumbItems: [],
      categoriesTree: [],
      curKind: '',      // 当前特征种类
    }
  },

  methods: {
    addBtnClick() {
      this.$refs.baseDlg.showDialog("新建分类", "add", "30%")
    },
    loadCategoryTree() {

    },
    handleOkClick() {

    }
  },

  watch: {
    $route: {
      handler: function (newRoute, oldRoute) {
        this.breadcrumbItems = ['特征中心', newRoute.meta.description];
        this.curKind = newRoute.meta.name;
      },
      immediate: true,
      deep: true
    }
  },

  created() {
    this.loadCategoryTree();
  },

}
</script>

<style scoped>
  .tree-top-tool-btns {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    padding: 5px;
  }

  .table-wrap-box {
    margin-top: 20px;
    height: 100%;
  }

  .tree-box {
    padding-top: 5px;
  }

</style>